<template>
    <div class="main">
        <div class="content">
            <div class="breadcrumb">
                <div class="title">当前位置：</div>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item><a href="/admin">首页</a></el-breadcrumb-item>
                    <el-breadcrumb-item>区域代理</el-breadcrumb-item>
                    <el-breadcrumb-item>添加代理</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="cont">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="ruleForm">
                    <el-form-item label="代理姓名" prop="realname">
                        <el-input v-model="ruleForm.realname"></el-input>
                    </el-form-item>
                    <el-form-item label="电话号码" prop="phone">
                        <el-input v-model="ruleForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="比例" prop="bili">
                        <el-input v-model="ruleForm.bili"></el-input>
                    </el-form-item>
                    <el-form-item label="所在地区" prop="address">
                        <el-input v-model="ruleForm.address"></el-input>
                    </el-form-item>
                    <el-form-item label="位置" prop="lng">
                        <div class="address">
                            <el-input v-model="ruleForm.lng" placeholder="地理经度"></el-input>
                            <el-input v-model="ruleForm.lat" placeholder="地理纬度"></el-input>
                            <el-button @click="positionShow=true">选择坐标</el-button>
                        </div>
                    </el-form-item>
                    <el-form-item label="状态" prop="status">
                        <el-radio-group v-model="ruleForm.status">
                            <el-radio label="1">启用</el-radio>
                            <el-radio label="0">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    
                    <div class="title">
                        账号信息           
                    </div>
                    <el-form-item label="账户名" prop="">
                        <el-input v-model="ruleForm.username"></el-input>
                    </el-form-item>
                    <el-form-item label="账户密码" prop="">
                        <el-input v-model="ruleForm.pwd"></el-input>
                    </el-form-item>
                    
                    <el-form-item>
                        <el-button :loading="loading" type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
                
            </div>
        </div>
        <Position @change="changemap" v-if="positionShow" @position="getposition" :dialog-visible.sync="positionShow" />
    </div>
</template>
<script>
import Position from '../../components/Map'
export default {
    components:{
        Position
    },
    data(){
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请输入比例'));
            } else if (value > this.yuanbili) {
            callback(new Error('比例不能大于'+this.yuanbili));
            } else {
            callback();
            }
        };
        return{
            loading:false,
            positionShow:false,
            yuanbili:'',
            ruleForm: {
                realname: '',//代理姓名
                phone:'',//电话号码
                address:'',//地址
                lng:'',//经度
                lat:'',//纬度
                username:'',//登录账号
                pwd:'',//登录密码
                status:'1',
                bili:'',//比例
            },
            rules: {
                realname: [
                    { required: true, message: '请输入代理姓名', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入电话号码', trigger: 'blur' }
                ],
                address: [
                    { required: true, message: '请输入地址', trigger: 'blur' }
                ],
                lng: [
                    { required: true, message: '请输入经纬度', trigger: 'change' }
                ],
                bili: [
                    { required: true, message: '请输入比例', trigger: 'blur' },
                    { validator: validatePass2, trigger: 'blur' }
                ],
                
            },
            
        }
    },
    mounted(){
        if (this.$route.params.id!='none') {
            this.getDetail(this.$route.params.id)
        }
        this.getbili()
    },
    computed:{
        geturl(){
            return this.$route.params.id=='none'?this.$api.lineup_proxy_create:this.$api.lineup_proxy_update
        }
    },
    methods:{
        async getbili(){
            let{data:{code,result}} = await this.$http.get(this.$api.lineup_proxy_show,{id:JSON.parse(localStorage.getItem('userinfo')).id})
            this.yuanbili = result.agent_info.yuanbili
        },
        //
        changemap(e){
            console.log(e)
            this.positionShow =e.show
        },
        getposition(e){
            console.log(e)
            this.ruleForm.lng = e[0]
            this.ruleForm.lat = e[1]
            this.positionShow = false
        },
        //获取详情
        async getDetail(e){
            let{data:{result}} = await this.$http.get(this.$api.lineup_proxy_show,{id:e})
            this.ruleForm = result.agent_info
        },
        //提交
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.submit()
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        async submit(){
            let ruleForm = new FormData()
            if (this.ruleForm.id) {
                ruleForm.append('id',this.ruleForm.id)
            }
            ruleForm.append('realname',this.ruleForm.realname)
            ruleForm.append('phone',this.ruleForm.phone)
            ruleForm.append('address',this.ruleForm.address)
            ruleForm.append('lng',this.ruleForm.lng)
            ruleForm.append('lat',this.ruleForm.lat)
            ruleForm.append('username',this.ruleForm.username)
            ruleForm.append('pwd',this.ruleForm.pwd)
            ruleForm.append('status',this.ruleForm.status)
            ruleForm.append('bili',this.ruleForm.bili)
            this.loading = true
            let {data:{status,result}} = await this.$http.post(this.geturl,ruleForm)
            this.loading = false
            if (status == 0) {
                this.$notify({
                    title: '成功',
                    message: result.msg,
                    type: 'success'
                });
                this.$router.push({ path: '/proxy/list' })
            }
        },
        //重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>
<style lang="scss" scoped>
    .main{
        display: flex;
        .content{
            padding: 20px;
            width: 100%;
            .breadcrumb{
                display: flex;
                align-items: center;
            }
            .cont{
                background-color: #ffffff;
                padding: 20px 30px;
                margin-top: 20px;
                .ruleForm{
                    width: 60%;
                    .title{
                        margin: 15px 0;
                        font-weight: 600;
                        border-left: 3px solid rgb(0, 140, 255);
                        font-size: 14px;
                        line-height: 18px;
                        padding-left: 10px;
                    }
                    .el-form-item{
                        margin-left:40px;
                        .address{
                            display: flex;
                            >div{
                                margin-right: 15px;
                               
                            }
                            button{
                                height: 40px;
                            }
                        }
                        
                    }
                }
            }
        }
    }
</style>